<template>
   <div class="list">
      <!-- 顶部搜索 -->
      <div class="search">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品名">
               <el-input v-model="formInline.name" placeholder="请输入商品名"></el-input>
            </el-form-item>
            <el-form-item label="分类">
               <el-select v-model="formInline.region" placeholder="请选择分类">
                  <el-option label="水果" value="sg"></el-option>
                  <el-option label="蔬菜" value="sc"></el-option>
                  <el-option label="水产" value="sc1"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="__query">查询</el-button>
            </el-form-item>
         </el-form>
      </div>
      <!-- 顶部按钮 -->
      <div class="option">
         <!-- <el-popconfirm
            title="你确定要删除这些商品吗？"
            @confirm="__delBatch()"
         >
            <el-button style="margin-right: 10px;" slot="reference" type="danger" plain :disabled="multipleSelection.length == 0">删除</el-button>
         </el-popconfirm> -->
         <!-- <el-button @click="__batchDel" type="danger" plain :disabled="multipleSelection.length == 0">删除</el-button> -->
         <!-- <el-button type="primary" plain>添加商品</el-button> -->
         <el-button type="warning" plain @click="__exportExl">导出</el-button>
      </div>
      <!-- 表格数据 -->
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%" height="452"
         @selection-change="handleSelectionChange">
         <!-- <el-table-column type="selection" width="55">
         </el-table-column> -->
         <el-table-column label="编号" width="55" type="index" :index="indexMethod">
         </el-table-column>
         <el-table-column label="商品名称"  width="280">
            <template slot-scope="{row}" :alt="row.name">{{ truncateString(row.name) }}</template>
         </el-table-column>
         <el-table-column label="图片">
            <template slot-scope="{row}">
               <div style="display: flex; justify-content: center;">
                  <img style="width: 46px;" :src="row.coverUrl" alt="">
               </div>
            </template>
         </el-table-column>
         <el-table-column label="价格">
            <template slot-scope="{row}">{{ row.price }}</template>
         </el-table-column>
         <el-table-column label="销量">
            <template slot-scope="{row}">{{ row.buyNum }}</template>
         </el-table-column>
         <el-table-column label="上架">
            <template slot-scope="{row}">
               <el-switch
                  :value="row.status === 1"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
               </el-switch>
            </template>
         </el-table-column>
         <el-table-column label="创建时间">
            <template slot-scope="{row}">{{ row.createTime }}</template>
         </el-table-column>
         <!-- 操作按钮 -->
         <el-table-column label="操作" row-style="{color: '#1890ff'}">
            <template slot-scope="{row}">
               <span style="color: #409eff; margin-right: 6px; cursor: pointer;" @click="dialogFormVisible = true">
                  <i class="el-icon-view" style="margin-right: 4px;"></i><span>查看</span>
               </span>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
         </el-pagination>
      </div>
      <!-- 修改商品 -->
      <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
         <el-form :model="form">
            <!-- 第一行：ID 和 价格 -->
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item label="ID" :label-width="formLabelWidth">
                     <el-input v-model="form.id" disabled autocomplete="off"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="价格" :label-width="formLabelWidth">
                     <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>

            <!-- 第二行：名称 -->
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item label="名称" :label-width="formLabelWidth">
                     <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>

            <!-- 第三行：详情 -->
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item label="详情" :label-width="formLabelWidth">
                     <el-input type="textarea" v-model="form.detail"></el-input>
                     <!-- <el-input v-model="form.detail" autocomplete="off"></el-input> -->
                  </el-form-item>
               </el-col>
            </el-row>

            <!-- 第四行：封面图 和 上架 -->
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item label="封面图" :label-width="formLabelWidth">
                     <el-image style="width: 100px; height: 100px" :src="form.coverUrl">
                     </el-image>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="上架" :label-width="formLabelWidth">
                     <el-switch v-model="form.value" active-color="#13ce66" inactive-color="#ff4949">
                     </el-switch>
                  </el-form-item>
               </el-col>
            </el-row>

            <!-- 第五行：图片列表 -->
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item label="图片列表" :label-width="formLabelWidth">
                     <el-image v-for="(item, index) in form.imgList" :key="index" style="width: 100px; height: 100px; margin-right: 10px;" :src="item">
                     </el-image>
                  </el-form-item>
               </el-col>
            </el-row>

            <!-- 第六行：规格列表 -->
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item label="规格列表" :label-width="formLabelWidth">
                     正在完成...
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>

         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
         </div>
      </el-dialog>
   </div>
</template>

<script>
import { getProductListApi } from "@/api/admin"
import { saveAs } from 'file-saver'

export default {
   name: "",
   data() {
      return {
         formInline: {
            name: '',
            category: ''
         },
         dialogFormVisible: false,
         form: {
            id: 1,
            name: '山东网纹瓜玫珑哈蜜瓜录厚甜高甜度',
            price: '28.9',
            detail: '很好吃',
            categoryId: '1',
            coverUrl: require("@/assets/img/shop/1.jpg"),
            imgList: [require("@/assets/img/shop/2.jpg"), require("@/assets/img/shop/3.jpg"), require("@/assets/img/shop/4.jpg"), require("@/assets/img/shop/5.jpg"), require("@/assets/img/shop/6.jpg")],
            buyNum: '10',
            status: true
         },
         formLabelWidth: '120px',
         tableData: null,
         multipleSelection: [], // 复选框的值
         pageNum: 1,
         pageSize: 10,
         total: 0,
      }
   },
   created() {
      // this.__getCustomerList()
      this.__getProductList()
   },
   methods: {
      async __getProductList() {
         let data = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
         }
         const res = await getProductListApi(data);
         // console.log("list: "+ res);
         if (!res) return;
         this.tableData = res.data.rows
         this.total = res.data.total
         // console.log("商品列表", this.tableData);
      },
      async __exportExl() {
         const res = await exportProductApi();
         if (!res) return;
         // 处理成表格文件之后调用一个保存数据的方法，浏览器会自动下载
         console.log(res);
         saveAs(
            // Blob 对象表格一个不可变、原始数据的类文件对象
            // Blob 表示的不一定是JavaScript原生格式的数据
            // File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件
            // 返回一个新创建的Blob对象，其内容参数中给定的数组串联组成
            new Blob([res]),
            // 设置导出文件名称
            `商品列表_${new Date().getTime()}.xlsx`
         )
      },
      __query() {

      },
      indexMethod(index) {
         // 计算编号
         return (this.pageNum - 1) * this.pageSize + index + 1;
      },
      async __delOne(row) {
         const res = await delOneProductApi({ id: row.id });
         if (!res) return;
         this.__getProductList()
         this.$message({message: '删除成功', type: 'success'});
         console.log("删除单个商品：", row);
      },
      async __delBatch() {
         let tt = this.multipleSelection.map(item => item.id);
         console.log("批量删除： ", tt);
         const res = await delBatchProductApi({ idList: tt });
         if (!res) return;
         this.__getProductList()
         this.$message({message: '批量删除成功', type: 'success'});
      },
      truncateString(str, length = 15) {
         // 如果字符串长度小于或等于长度限制，直接返回原字符串
         if (str.length <= length) {
            return str;
         }
         // 截取指定长度的字符串，并在末尾添加省略号
         const truncated = str.slice(0, length - 3) + '...';
         return truncated;
      },
      toggleSelection(rows) {
         console.log("rows: " + rows);
         if (rows) {
            rows.forEach(row => {
               this.$refs.multipleTable.toggleRowSelection(row);
            });
         } else {
            this.$refs.multipleTable.clearSelection();
         }
      },
      handleSelectionChange(val) { // 每点击一次复选框 发生的事件
         this.multipleSelection = val;
         console.log("multipleSelection: ", this.multipleSelection);
      },
      handleSizeChange(val) {
         this.pageSize = val
         this.__getProductList()
         console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.pageNum = val
         this.__getProductList()
         console.log(`当前页: ${val}`);
      }
   }
}
</script>

<style lang="less" scoped>
.option {
   margin: -4px 0 10px 0;
}

.list {
   box-sizing: border-box;
}

.el-button {
   padding: 8px 10px !important;
}

.el-input__inner {
   height: 34px !important;
}
</style>
